<template>
  <div>
    <el-card style="margin-bottom: 10px">
      <!-- 查询 -->
      <div class="searchBar">
        <!-- <el-tooltip  effect="dark" content="Top Center 提示文字" placement="top">
        <span class="el-icon-question details-icon"></span>
      </el-tooltip> -->
        <span style="font-size: 14px"> 所属数据看版：</span>
        <el-select
          clearable
          @change="changPanel"
          v-model="dataPanel"
          placeholder="请选择"
        >
          <el-option
            v-for="item in NameLi"
            :key="item.id"
            :label="item.boardName"
            :value="item.id"
          ></el-option>
        </el-select>
        <span style="font-size: 14px" class="onebox">依赖数据源：</span>
        <el-select
          clearable
          @change="changSource"
          v-model="dataSource"
          placeholder="请选择"
        >
          <el-option
            v-for="item in DropDown"
            :key="item.id"
            :label="item.dataSourceName"
            :value="item.id"
          ></el-option>
        </el-select>

        <el-button
          style="margin-left: 30px"
          type="primary"
          size="small"
          @click="ConditionSearch"
          >搜索</el-button
        >

        <el-button
          style="margin-left: 30px"
          type="primary"
          size="small"
          @click="search"
          >添加</el-button
        >
      </div>
    </el-card>

    <el-card>
      <!-- 列表 -->
      <main-part
        :tableData="tableData"
        :DropDown="DropDown"
        :NameLi="NameLi"
        :TheInterFace="TheInterFace"
        :params="params"
        @pagingname="
          (value) => {
            this.pagingname = value;
          }
        "
        @JudgeConditions="
          (value) => {
            this.JudgeConditions = value;
          }
        "
        @isDialog="
          (value) => {
            this.isDialog = value;
          }
        "
        @ruleForm="
          (value) => {
            this.ruleForm = value;
          }
        "
        @ConditionSearchEmpty="
          (value) => {
            if (value) {
              this.DeletedPage();
            }
          }
        "
      />

      <!-- 分页 -->
      <paging-component
        :name="params"
        :totalCount="totalCount"
        @NamePageSize="
          (value) => {
            params.pageSize = value;
          }
        "
        @NamePageNum="
          (value) => {
            this.handleCurrentChange(value);
          }
        "
        @totalCount="
          (value) => {
            this.totalCount = value;
            this.souarData();
          }
        "
      />

      <!--   编辑弹出层 -->
      <popup-component
        :pagingname="pagingname"
        :isDialog="isDialog"
        :ruleForm="ruleForm"
        :DropDown="DropDown"
        :TheInterFace="TheInterFace"
        :NameLi="NameLi"
        :JudgeConditions="JudgeConditions"
        @ResetData="
          (value) => {
            if (value) {
              this.ResetData();
            }
          }
        "
        @ConditionSearchEmpty="
          (value) => {
            if (value) {
              this.ConditionSearchEmpty();
            }
          }
        "
        @isDialog="
          (value) => {
            this.isDialog = value;
          }
        "
      />
    </el-card>
  </div>
</template>

<script>
import {
  dataSource,
  NameList,
  TheInterface,
  // IndexOfNew,
  // UpdateInterface,
  DropDownQuery,
  isLogin,
} from "@/assets/js/api";
import PopupComponent from "./components/PopupComponent.vue";
import PagingComponent from "@/components/PagingComponent";
import MainPart from "./components/MainPart.vue";
export default {
  components: { PopupComponent, MainPart, PagingComponent },
  data() {
    return {
      // 表格显示隐藏
      RightWrong: true,
      // 数据总条数
      totalCount: 0,
      //弹窗表单
      ruleForm: {
        id: "",
        indexSetSourceId: "",
        indexSetBelongBoardId: "",
        indexSetTypeId: "",
        indexSetCalcuSql: "",
        createUser: "",
      },
      // 编辑
      pagingname: "",
      // 看板列表
      NameLi: [],
      // 获取数据的参数
      params: {
        pageNum: 1,
        pageSize: 10,
        indexSetBelongBoardId: "",
        indexSetSourceId: "",
      },
      dataPanel: "",
      dataSource: "",
      storeModelName: "edit",
      dialogVisible: false,
      // 用来确认是否是添加还是编辑
      JudgeConditions: false,
      pageNum: 1,
      PageSize: 10,
      // 表格数据
      tableData: [],
      // 数据源下拉
      DropDown: [],
      // 指标集所属类型列表
      TheInterFace: [],
      // 弹出层的打开与关闭
      isDialog: false,

      SetBelongBoardId: null,
      SetBelongBoardI: null,
    };
  },
  async created() {
    let res = await isLogin();
    if (res.code == 0) {
      this.souarData(); //初始化列表接口调用
      this.NameL(); //看板名称列表接口
      this.TheIntQuery(); //依赖数据源下拉接口
      this.PopupWindow(); //指标集所属类型列表接口
    } else {
      this.login();
    }
  },
  methods: {
    // 删除的分页
    DeletedPage() {
      this.totalCount -= 1;
      if (
        this.totalCount == (this.params.pageNum - 1) * this.params.pageSize &&
        this.totalCount != 0
      ) {
        this.params.pageNum -= 1;
        this.souarData();
      } else {
        this.souarData();
      }
    },
    // 单点登录地址
    login() {
      let url =
        "/data-conf-center-server/login?referUrl=" + window.location.href;
      window.location.href = url;
    },
    // 清空表单
    ResetData() {
      this.ruleForm = {
        indexSetSourceId: "",
        indexSetBelongBoardId: "",
        indexSetTypeId: "",
        indexSetCalcuSql: "",
        createUser: "",
        rindexSetCode: "",
      };
    },
    // 弹窗数据源
    PopoverSource(value) {
      this.ruleForm.indexSetSourceId = value;
    },
    // 弹窗看板
    PopupKanban(value) {
      this.ruleForm.indexSetBelongBoardId = value;
    },
    // 指标类型
    PopupFace(value) {
      this.ruleForm.indexSetTypeId = value;
    },
    // 依赖数据源下拉接口
    async TheIntQuery() {
      let res = await DropDownQuery();
      if (res.code == 0) {
        this.DropDown = res.data;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    async NameL() {
      let res = await NameList();
      if (res.code == 0) {
        this.NameLi = res.data;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    async PopupWindow() {
      let res = await TheInterface();
      if (res.code == 0) {
        this.TheInterFace = res.data;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // 数据看板change事件
    changPanel(value) {
      this.SetBelongBoardId = value;
    },
    // 依赖数据源change事件
    changSource(value) {
      this.SetBelongBoardI = value;
    },
    // 开始搜索
    ConditionSearchEmpty() {
      this.params.indexSetBelongBoardId = "";
      this.params.indexSetSourceId = "";
      this.params.pageNum = 1;
      this.params.pageSize = 10;
      this.souarData();
    },
    // 搜索按钮
    async ConditionSearch() {
      this.params.indexSetBelongBoardId = this.SetBelongBoardId;
      this.params.indexSetSourceId = this.SetBelongBoardI;
      this.params.pageNum = 1;
      this.params.pageSize = 10;
      this.souarData();
    },
    // 添加按钮
    search() {
      this.ResetData();
      this.pagingname = "添加";
      this.isDialog = true;
      this.JudgeConditions = false;
    },
    // 初始化数据
    async souarData() {
      //调用列表接口
      let res = await dataSource(this.params);
      if (res.code == 0) {
        res.data.list.forEach((e) => {
          e.isClass = "isStyle";
        });
        this.tableData = res.data.list;
        this.totalCount = res.data.totalCount;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // 点击分页时触发
    async handleCurrentChange(val) {
      this.params.pageNum = val;
      //调用列表接口
      // dataSource(this.params).then((res) => {
      //   if (res.code == 0) {
      //     this.tableData = res.data.list;
      //     this.totalCount = res.data.totalCount;
      //   }
      // });
      let res = await dataSource(this.params);
      if (res.code == 0) {
        res.data.list.forEach((e) => {
          e.isClass = "isStyle";
        });
        this.tableData = res.data.list;
        this.totalCount = res.data.totalCount;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
      // console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style >
.el-tooltip__popper {
  font-size: 14px;
  max-width: 50%;
  overflow: hidden;
}
</style>
<style scoped>
.searchBar {
  height: 60px;
  line-height: 60px;
}
.onebox {
  margin-left: 30px;
}
::v-deep .el-input__inner {
  height: 30px;
}

.el-table {
  width: auto;
}
.add_to {
  color: #000;
  margin-left: 50px;
}
.isStyle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.searchBar .item {
  margin-left: 30px;
}
.el-icon-question {
  margin-right: 5px;
  color: rgb(131, 119, 119);
}
</style>
